import React, { Component } from 'react'
// vue 子组件中可以通过 props 对象的形式设置 属性的默认值
// vue
//    props: ['name']
//    props: { name: String }
//    props: { name: { type: String, default: '123' } }
//    props: { name: { type: Object, default () { return { a: 1}} } }
function Title (props) {
  return (
    <h1>{ props.name }: React 的核心库只关注于视图层</h1>
  )
}
// 函数式组件 ---- 定义好组件以后设置默认值
Title.defaultProps = {
  name: '默认标题'
}
class Content extends Component {
  // 类组件 ---- 添加静态属性表示默认值
  static defaultProps = {
    name: '默认内容'
  }
  render () {
    return (
      <div>{ this.props.name }: 欢迎来到React的世界</div>
    )
  }
}
export default class App extends Component {
  render() {
    return (
      <>
        <Title name="标题" test="123"/>
        <Content name="内容"/>
        <Title/>
        <Content/>
      </>
    )
  }
}
